// token/ip模块

import { observer } from "mobx-react";
import "./index.less"
import { Card, Spin, Form, Row, Col, Input, Button, Popconfirm, Select } from 'antd';
const { Option } = Select;
import { SearchOutlined } from '@ant-design/icons'
import store from "./model"
import Menu from "../publicComponent/menu/index.jsx"
import { history } from "umi";
import { useEffect, useState } from "react";
import axiosApi from "../../utils/requestAxios";
import api from "../../utils/api"
import { check } from '@/utils/check';
import GlobalModel from "@/utils/static";
import { message } from 'antd'
import indexStore from "../model"
import { setIP, IP } from "@/utils/static";
import FingerApi from "../finger_device/model"


function Index() {

    const [form] = Form.useForm();
    // 判断本地存储有无token
    let [flag, setFlag] = useState(false)

    // 记录最后一次跳转路由path
    // 设置窗口大小和位置
    useEffect(() => {
        indexStore.StoragePath(history.location.pathname)
        FingerApi.setWindowSize(800, 600)
        FingerApi.centerWindow()
    }, [])

    // 获取本地存储form
    useEffect(() => {
        let obj = JSON.parse(localStorage.getItem("device"))
        if (obj) {
            setFlag(true)
            form.setFieldsValue(obj)
        } else {
            setFlag(false)
        }
    }, [])

    // 绑定提交
    async function submit() {
        try {
            let obj = await form.validateFields()
            // 修改IP
            api.IP = `http://${obj.IP}:9083/hospital-service`
            console.log(obj)
            let res = null
            if (obj.deviceNum === "指纹录入" || obj.deviceNum === "其它") {
                const parms = {
                    username: "system",
                    password: "666666",
                };
                res = await axiosApi('POST', api.login() , parms);
            } else {
                res = await axiosApi("POST", api.register(), { "deviceNum": obj.deviceNum })
            }
            if (!check(res)) return;
            if (res && res.data) {
                message.success('绑定成功');
                obj.token = res.data
                // 设备信息存起来
                localStorage.setItem("device", JSON.stringify(obj))
                form.setFieldsValue(obj)
                setFlag(true)
                // 设置token
                GlobalModel.SetTokenData(res.data);
            }

        } catch (errorInfo) {
        }
    }

    //
    const layout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 18,
        },
    };

    // 默认可选择的值
    const select = [
        { val: "指纹录入" },
        { val: "001" },
        { val: "002" },
        { val: "003" },
        { val: "004" },
        { val: "005" },
        { val: "006" },
        { val: "007" },
        { val: "008" },
        { val: "009" },
        { val: "010" },
        { val: "011" },
        { val: "012" },
        { val: "013" },
        { val: "014" },
        { val: "015" },
        { val: "016" },
        { val: "017" },
        { val: "018" },
        { val: "019" },
        { val: "020" },
        { val: "其它" },
    ]

    return (
        <>
            <Spin tip="加载中" spinning={store.loading} size="large">
                <div className="code">
                    <div className="code-title">
                        <img onClick={() => { history.push({ pathname: "/", query: { name: "child" } }), indexStore.StoragePath("/") }} src={require("../../assets/images/向左箭头.png")} alt="" />
                        基础设置
                    </div>
                    <div className="code-body">
                        <div className="code-body-form">
                            <Form
                                {...layout}
                                form={form}>
                                <Row justify="center" style={{ marginBottom: "16px" }}>
                                    <Col>
                                        <span style={{ fontWeight: "600" }}>设备属性设置</span>
                                    </Col>
                                </Row>
                                {/* <Row justify="center">
                                    <Col span={15}>
                                        <Form.Item
                                            label="token"
                                            name="token"
                                        >
                                            <Input disabled={true} placeholder="请输入token" />
                                        </Form.Item>
                                    </Col>
                                </Row> */}
                                <Row justify="center">
                                    <Col span={15}>
                                        <Form.Item
                                            label="彩虹云服务IP"
                                            name="IP"
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请输入IP',
                                                },
                                            ]}
                                        >
                                            <Input disabled={flag} placeholder="请输入IP" />
                                        </Form.Item>
                                    </Col>
                                </Row>
                                <Row justify="center">
                                    <Col span={15}>
                                        <Form.Item
                                            label="设备编号"
                                            name="deviceNum"
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请输入设备编号',
                                                },
                                            ]}
                                        >
                                            {/* <Input disabled={flag} placeholder="请输入设备编号" /> */}
                                            <Select
                                                placeholder="请选择设备编号"
                                                disabled={flag}
                                            >
                                                {
                                                    select.map((item, i) => {
                                                        return (
                                                            <Option key={i} value={item.val}>{item.val}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                </Row>
                                <Row justify="center">
                                    <Col>
                                        <Button onClick={() => { setFlag(false) }} style={{ marginRight: "20px" }}>修改</Button>
                                        <Popconfirm
                                            title="请再次确认您要执行此操作"
                                            description="Are you sure to delete this task?"
                                            onConfirm={submit}
                                            okText="确定"
                                            cancelText="取消"
                                            disabled={flag}
                                        >
                                            <Button type="primary" disabled={flag} >绑定</Button>
                                        </Popconfirm>

                                    </Col>
                                </Row>
                            </Form>
                        </div>
                    </div>
                    <div className="code-versions">彩虹云指纹识别软件 V1.0.0</div>
                </div>
            </Spin>
        </>
    )
}

export default observer(Index)